<!-- 
流式布局
    也就是百分比布局，也称非固定像素布局
    盒子宽度设置为百分比，可根据屏幕宽度进行伸缩，不受固定像素限制、内容会自动填充
    
    设置父容器居中，然后限制伸缩合理范围，就可以制作成一个移动端页面
        max-width/height    // 设置宽度即可，高度一般用不到
        min-width/height
        
    不同浏览器窗口缩放存在最小宽度限制，将F12窗口垂直显示，拉伸F12窗口就能自由调整宽度

拓展：
  现在智能手机一般最小宽度是320px
  参考京东案例：第403~414集
 -->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  section {
    width: 100%;
    /* 限制宽度伸缩范围 */
    /* 达到最小，就会出现滚动条，达到最大，就不再跟随缩放 */
    min-width: 320px;
    max-width: 980px;
    margin: 0 auto;
  }
  section div {
    /* 水平方向：流式布局一般结合浮动、或定位使用 */
    float: left;
    width: 50%;
    height: 200px;
    text-align: center;
    line-height: 200px;
  }
  section div:nth-child(1) {
    background-color: purple;
  }
  section div:nth-child(2) {
    background-color: orangered;
  }
</style>

<section>
  <div>hello,world</div>
  <div>你好，世界</div>
</section>
